﻿<!DOCTYPE html>
<html>
<head>
<title>animation可拖动滑块选择区间代码 - 站长素材</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-slider-pips.min.css">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-slider-pips.js"></script>
<style type="text/css">

	#slider{
		height: 200px;
		width: 60px;
		position: relative;
		margin: 200px auto;

	}

	#slider .slider-screen{
		width: 3px;
		height: 80%;
		border: none;
		position: absolute;
		margin: 0px;
		top: 10%;
		left: 0%;
		z-index: 2;
		background: #D0D0D0;
	}

	#slider .slider-screen .ui-slider-handle{
		width:9px;
		height: 15px;
		left: -4px;
		margin-bottom: -8px;
	}
	#slider .slider-screen .ui-slider-pip{
		width: 30px;
		left: 26px;
	}
	#slider .slider-screen .ui-slider-pip .ui-slider-label{
		left: 0px;
		width: 30px;
		text-align: center;
	}
	#slider .slider-screen .ui-slider-line{
		background: none;
	}

	#slider .slider-self-border{
		width: 30px;
		height: 198px;
		border: 1px solid green;
		position: absolute;
		left: 25px;
		z-index: 1;
	}
	#slider .slider-self-line{
		width: 3px;
		height: 100%;
		background: #D0D0D0;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		border: 1px solid #ddd;
		font-weight: bold;
		color: #0073ea;
	}
</style>
</head>
<body>

<div id="slider">
	<div class="slider-screen"></div>
	<div class="slider-self-border"></div>
	<div class="slider-self-line"></div> 
</div>

<script type="text/javascript">
	
	var numbers = [1,2,3,4]; 

	$("#slider").find('.slider-screen').slider({

		min: 0, 
		max: numbers.length-1, 
		orientation: "vertical"

	}).slider("pips", {

		rest: "label",
		labels : numbers.map(function(x){return x+'x'})

	});

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>